<script lang="ts">
  let { isHidden = $bindable(true), apiRoute = $bindable('/') } = $props()
  import {
    Table,
    TableBody,
    TableBodyCell,
    TableBodyRow,
    TableHead,
    TableHeadCell,
    Checkbox,
    Input,
  } from 'svelte-5-ui-lib'
  import { CloseCircleOutline } from 'flowbite-svelte-icons'
  import { updateParams, FullURL } from '$lib/utils/stores.svelte'
  import { buildUrlWithParams } from '$lib/utils/buildParam'
  import KeyValueTable from '$lib/utils/tableData.svelte'
  const baseUrl = $FullURL
  let domain = $derived($FullURL)
  $effect(() => { 
    FullURL.set(domain) 
  })
  let params = new KeyValueTable()
</script>
<Table divClass="max-h-60 overflow-y-auto rounded-xl shadow-md bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 transition-all duration-200">
  <TableHead class="text-md sticky !text-24 top-0 bg-gray-50 dark:bg-zinc-800 text-gray-500">
    <TableHeadCell class="!w-6 border-box" />
    <TableHeadCell>键</TableHeadCell>
    <TableHeadCell>值</TableHeadCell>
    <TableHeadCell />
  </TableHead>
  <TableBody class="divide-y">
    {#each params.rows as row, i}
      <TableBodyRow class="border-none rounded-lg hover:shadow-lg transition-all duration-150">
        <TableBodyCell class="!p-4">
          <Checkbox checked={row.valid} />
        </TableBodyCell>
        <TableBodyCell>
          <Input class="border-white text-orange-700 focus:text-gray-700 dark:text-orange-500 min-h-8 focus:bg-gray-50 focus:outline focus:outline-primary-500 rounded-md shadow-sm transition-all duration-150" placeholder="Key" size="sm" bind:value={row.key} onblur={() => { params.handleBlur(i); domain = buildUrlWithParams(baseUrl, params.keyValueObject); if (row.isFull) { updateParams(params.keyValueObject) } }} />
        </TableBodyCell>
        <TableBodyCell>
          <Input size="sm" placeholder="Value" class="border-white text-orange-700 focus:text-gray-700 dark:text-orange-500 min-h-8 focus:bg-gray-50 focus:outline focus:outline-primary-500 rounded-md shadow-sm transition-all duration-150" bind:value={row.value} onblur={() => { params.handleBlur(i); domain = buildUrlWithParams(baseUrl, params.keyValueObject); if (row.isFull) { updateParams(params.keyValueObject) } }} />
        </TableBodyCell>
        <TableBodyCell>
          <CloseCircleOutline class="w-4 h-4 text-gray-400 hover:text-orange-600 transition-colors duration-150" onclick={() => { params.removeRow(row.id); domain = buildUrlWithParams(baseUrl, params.keyValueObject); updateParams(params.keyValueObject) }} />
        </TableBodyCell>
      </TableBodyRow>
    {/each}
  </TableBody>
</Table>